<template>
    <ul>
    <li :class="{ check: todo.completed }">
      <input type="checkbox" v-model="todo.completed">
      {{ todo.text }}
      <button class="close" @click="$emit('remove-todo', index)">删除</button>
    </li>
    </ul>
  </template>
  
  <script setup>
  defineProps({
    todo: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  })
  </script>

<style scoped>
  ul {
    padding: 0;
  }
li {
    list-style: none;
    position: relative;
    padding-left: 40px;
    height: 40px;
    line-height: 40px;
}

/* 将所有奇数列表项设置为不同的颜色（斑马线）*/
li:nth-child(odd) {
    background-color: #f9f9f9;
}

/* 光标移入的时候背景变暗 */
 li:hover {
    cursor: pointer;
    background-color: #dddddd;
}

/* 单击时，添加背景色并删除文本 */
 li.check {
    text-decoration: line-through;
    color:red;
}

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 0px 20px;
    font-size: 12px;
}

.close:hover {
    color: white;
}
</style>